import React from 'react';
import {Image, ScrollView, Text, View} from 'react-native';

const ChatContent = ({messages}) => {
  return (
    <ScrollView contentContainerStyle={{padding: 10}}>
      {messages.map((message, index) => (
        <View key={index} style={{flexDirection: 'row', justifyContent: message.sender === 'User1' ? 'flex-start' : 'flex-end', marginBottom: 10}}>
          {message.sender === 'User1' && <Image source={{uri: message.avatar}} style={{width: 50, height: 50, borderRadius: 25, marginRight: 10}} />}
          <View
            style={{
              maxWidth: '70%',
              padding: 10,
              borderRadius: 10,
              backgroundColor: message.sender === 'User1' ? '#eee' : '#0084ff',
              alignItems: 'flex-start',
              justifyContent: message.sender === 'User2' ? 'center' : 'flex-start',
            }}>
            {message.sender === 'User1' && <Text style={{color: 'black', fontWeight: 'bold'}}>{message.name}</Text>}
            <Text style={{color: message.sender === 'User1' ? 'black' : 'white'}}>{message.content}</Text>
          </View>
          {message.sender === 'User2' && <Image source={{uri: message.avatar}} style={{width: 50, height: 50, borderRadius: 25, marginLeft: 10}} />}
        </View>
      ))}
    </ScrollView>
  );
};

export default ChatContent;
